<template>
	<view class="footprint">
		<view class="commodity">
			<view class="emptyCommodity" v-if="data.footpList.length==0">
				<image src="http://pubuimg.cqguanjie.cn/chat/16947582964975"></image>
				<text>暂无收藏的商品</text>
			</view>
			<view v-else class="commFor" v-for="(item,index) in data.footpList" :key="index"  @click="$goURl(`/pages/commodity/details?id=${item.goods_id}`)">
				<view class="commImg">
					<image :src="item.goods.img"></image>
				</view>
			<view class="commdityDetails">
				<text class="commdName textsl2">{{item.goods.name}}</text>
				<view class="textsl1 titiletxt">{{item.goods.title}}</view>
				<view class="shopPrice">
					<text class="commPrice">￥{{$toFiexd(item.goods.price,2)}}</text>
<!--							<text class="discount">￥{{$toFiexd(item.goods.market,2)}}</text>-->
							<view class="deleteShoop"@click.stop>
								<uni-icons @click="deleteCollect(item.ID)" type="trash" size="30"></uni-icons>
							</view>
				</view>
				<view class="deleteComm">

					<view class="deleteShoop">
						<text>已售{{item.goods.sales}}件</text>
					</view>
				</view>
			</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const { appContext } = getCurrentInstance();
	const data = reactive({
		footpList:[],
	})
	onLoad((option)=>{
		console.log('页面onLoad')
		getData()
	})
	onShow(()=>{
		console.log('页面onShow')
	})
	function getData(){
		appContext.config.globalProperties.$request({
			url: `api/favorites/?page=1&size=20`,
			method: 'get',
			success(res) {
				data.footpList = res.data.data
			}
		})
	}
	function deleteCollect(id){
		uni.showModal({
			title:'提示',
			content:'是否删除?',
			success:function (res){
				if (res.confirm) {
					appContext.config.globalProperties.$request({
						url: `api/favorites/`,
						method: 'DELETE',
						data:{
							id:id
						},
						success(res) {
							if(res.errno==0){
								getData()
								uni.showToast({
									icon: 'none',
									title: res.errmsg
								})
							}else{
								uni.showToast({
									icon: 'none',
									title: res.errmsg
								})
							}
						}
					})
				}else{
					console.log('用户点击确定');
				}
			}
		})

	}
</script>

<style scoped lang="scss">
	page{
				background-color: #F3F6FD;
	}
	.commodity{
		width: 100%;
		.emptyCommodity{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 177px;
				height: 200px;
			}
			text{
				font-size: 15px;
				margin-top: 10px;
				color: #909399;
			}
		}
		.commFor{
			width: 94%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 20upx;
			margin-top: 20upx;
			display: flex;
			.commImg{
				width: 30%;
				padding: 30upx;
				image{
					width: 100%;
					height: 200upx;
					border-radius: 20upx;
				}
			}
			.commdityDetails{
				width: 70%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding-right: 10px;
				.commdName{
					color: #303133;
					font-size: 14px;
					font-weight: 700;
				}
				.titiletxt {
					font-size: 20rpx;
					color: #999;
				}
				.shopPrice{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.commPrice{
						font-size: 18px;
						color: rgb(252,82,39);
						font-weight: 700;
					}
					.discount{
						flex: 1;
						color: #999999;
						text-decoration: line-through;
						font-size: 13px;
						margin-left: 10rpx;
					}
					image{
						width: 30px;
						height: 14px;
						margin-left: 10px;
					}
				}

				.deleteComm{
					display: flex;
					justify-content: space-between;
					align-items: center;

					.deleteShoop{
							color: #909090;
						margin-right: 18px;
						font-weight: 400;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 40upx;
							height: 40upx;
						}
					}

				}
			}
		}

	}
</style>
